<template>
  <div class="trade" style="background-color: #FEFEFE; margin-bottom: 0.5rem;">
    <div class="card">
      <view class="thumbnail">
        <img class="avatar" src="https://img.yzcdn.cn/upload_files/2016/11/25/FpqPXlrMRjKwJs8VdTu3ZDJCj4j5.jpeg?imageView2/2/w/200/h/200/q/90/format/jpeg"/>
      </view>

      <view class="detail">
        <div class="detail-info" style="margin-right: 2rem;">
          <div class="title">我的昵称</div>
          <div class="mono">
            <p>什么什么店铺名</p>
          </div>
        </div>
        <div style="position: absolute; top: 0.7rem; right: 0.5rem">
          <img class="action" src="/static/image/gps.png" @click="handleGpsTap">
          <img class="action" src="/static/image/mobile.png" @click="handleMobileTap" style="margin-left: 1rem;">
        </div>
      </view>
    </div>

    <div style="background-color: white; width: 80%; margin: 0 10%;">
      <div class="header" style="padding-bottom: 0.5rem; border-bottom: 1px solid #F8F8F8;">
        <p style="font-size: 1rem; color: #404A4C; text-align: center;">预约项目</p>
      </div>
      <div class="body">
        <div class="item">
          <div class="item-left" >预约项目</div>
          <div class="item-right">染发套餐</div>
        </div>
        <div class="item">
          <div class="item-left">付款金额</div>
          <div class="item-right">599人民币</div>
        </div>
        <div class="item">
          <div class="item-left">付款时间</div>
          <div class="item-right">10/27 10:00-12:00</div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  props: ['id', 'avatar', 'name', 'seniority', 'mono', 'items'],
  methods: {
    handleGpsTap () {
      wx.openLocation({
        latitude: 23.362490,
        longitude: 116.715790,
        scale: 18,
        name: '华乾大厦',
        address:'金平区长平路93号'
      })
    },
    handleMobileTap () {
      wx.makePhoneCall({
        phoneNumber: '15990195057'
      });
    }
  }
}
</script>

<style scoped>

  .trade {
    background-color: white;
    padding-bottom: 0.5rem;
  }

  .action {
    width: 0.7rem;
    height: 0.7rem;
  }

  .item {
    display: flex;
    font-size: 0.36rem;
    padding: 0.15rem 0;
  }

  .item .item-left {
    width: 40%;
    position:relative;
    margin-left:auto;
    margin-right:auto;
    color: #404A4C;
  }

  .item .item-right{
    flex:1;
    position:relative;
    color: #858697;
  }

.card {
  display:flex;
  margin-left:0;
  padding: 0.5rem;
  overflow:hidden;
  position:relative;
  font-size:1rem;
}

.thumbnail {
  width: 1.2rem;
  height: 1.2rem;
  position:relative;
  margin-left:auto;
  margin-right:auto;
  overflow:hidden;
  background-size:cover;
  border-radius: 0.6rem;
}

.thumbnail .avatar {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:auto;
  overflow:hidden;
  max-width:100%;
  height:100%;
}

.detail {
  flex:1;
  margin-left:10px;
  position:relative;
}

.detail-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 4.5rem;
  padding: 0.3rem 0 0 0;
}

.title {
  height:0.35rem;
  font-size:0.36rem;
  color:rgba(64,74,76,1);
  line-height:0rem;
}
.mono {
  height:0.29rem;
  font-size:0.3rem;
  color:rgba(133,134,151,1);
  line-height:0.42rem;
}
</style>
